<template>
    <div>
        <common-banner name="产品中心" en-name="Products Center"></common-banner>
        <div class="page-center">
            <p class="keyword mt-20">
                全部搜索结果>“<span>{{ keyword }}</span
                >”，共{{ total }}条结果
            </p>
            <div class="mt-20 mb-20">
                <product-list :list="list"></product-list>
            </div>
            <el-pagination background layout="prev, pager, next" :total="total" class="mb-20"></el-pagination>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router/index'
import CommonBanner from '@/components/CommonBanner.vue'
import ProductList from '@/components/ProductList.vue'

const { keyword } = router.currentRoute.query

// TODO从接口中获取
const list = ref([
    {
        id: 1,
        name: '依托考昔杂质14',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/T18489.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
    {
        id: 2,
        name: '依托考昔杂质15',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/P30406.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
    {
        id: 3,
        name: '依托考昔杂质16',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/P19945.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
    {
        id: 4,
        name: '依托考昔杂质17',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/P19945.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
    {
        id: 5,
        name: '依托考昔杂质18',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/P19945.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
])

const total = ref(1000)
if (keyword) {
    // TODO从接口中获取
    document.title = `产品查询${keyword}`
}
</script>
<style lang="scss" scoped>
.keyword {
    color: #5a5a5a;
    font-family: arial;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    background-color: #eeeeee;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    margin-bottom: 3px;
    display: block;

    span {
        color: red;
    }
}
</style>
